﻿<template>
    <div class="home">
        <!-- 首页图片 -->
        <div class="home-hed h-[600px] lg:h-[884px]">
            <div class="xm">
                <div
                    class="absolute w-[90%] xl:w-[80%] 2xl:w-[70%] left-1/2 -translate-x-1/2 top-[180px] lg:top-[211px] flex flex-col"
                >
                    <div class="font60 space-x-2">
                        <span>{{ t('Rang') }}</span>
                        <span class="text-red-700">{{ t('Signing') }}</span>
                        <span>{{ t('Asmessage') }}</span>
                    </div>

                    <div class="flex-1 fontSmall pt-0 lg:pt-5 mt-5 xl:mt-10">
                        <p>{{ t('HomeDesc1') }}</p>
                        <p class="mt-4">{{ t('HomeDesc2') }}</p>
                    </div>

                    <div class="h-[60px] flex items-end mt-5 xl:mt-10">
                        <button type="button" class="big-white-btn" @click="login">
                            {{ t('GetStarted') }}
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 了解 Signee 的功能 -->
        <div class="bg-white py-10 md:py-16 lg:py-[120px] text-black">
            <h1 class="font40 text-center">{{ t('ExploreFeatures') }}</h1>

            <div
                class="m grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-6 md:gap-10 lg:gap-16 mt-10 md:mt-20 lg:mt-[120px]"
            >
                <div
                    class="rounded border border-slate-300 p-5 flex items-center cursor-pointer justify-center hover:scale-110 hover:shadow-xl transition-all duration-500"
                    v-for="(item, index) in list"
                    :key="index"
                >
                    <img :src="item.url" alt="" class="w-16 hover:skew-y-12 transition-all duration-500" />

                    <div class="ml-5 w-[130px]">
                        <div class="w-5 h-1 rounded-sm bg-red-600"></div>
                        <div class="mt-2">{{ item.name }}</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 智能模块 -->

        <div class="bg-[#F8F8F8]">
            <div class="m py-0 md:py-[80px]">
                <!-- 1 -->

                <div v-for="(item, index) in muList" :key="index">
                    <h1 class="font40 text-center py-10 lg:hidden">{{ item.title }}</h1>
                    <div
                        class="flex items-center flex-col lg:flex-row py-5 lg:py-10"
                        :class="item.id % 2 ? 'lg:flex-row' : 'lg:flex-row-reverse'"
                    >
                        <img
                            :src="item.url"
                            alt=""
                            class="w-[400px] h-[300px]"
                            :class="item.id % 2 ? 'lg:mr-20 mt-0' : 'lg:ml-20 ml-0'"
                        />

                        <div
                            class="lg:mt-0 mt-10 flex-1 flex flex-col text-[#1A1A1A] w-full min-[420px]:w-[360px] lg:w-full h-auto lg:min-h-[300px]"
                        >
                            <h1 class="font40 hidden lg:block pb-10">{{ item.title }}</h1>

                            <template v-for="(p, i) in item.subList" :key="i">
                                <p class="font16 flex items-baseline leading-8 w-full justify-center" v-if="!p.title">
                                    <i class="bg-red-500 rounded-full w-2 h-2 mr-2"></i>
                                    <span class="flex-1">{{ p.content }} ​</span>
                                </p>
                                <div class="font16 flex items-baseline leading-8 w-full" v-else>
                                    <i class="bg-red-500 rounded-full w-2 h-2 mr-2"></i>
                                    <div class="flex-1">
                                        <div class="font-bold">{{ p.title }} ​</div>
                                        <div>{{ p.content }}</div>
                                    </div>
                                </div>
                            </template>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 值得信赖 -->
        <div class="bg-white h-[500px]">
            <div class="w-[85%] mx-auto sm:xm relative h-full z-10">
                <div
                    class="absolute top-[80px] left-0 w-full h-auto p-[20px] sm:p-[40px] lg:p-[80px] rounded-md shadow-md flex xl-box justify-between"
                >
                    <div class="w-[30%] h-[244px] flex-col justify-between hidden xl:flex">
                        <p class="text-[40px] font-bold text-black">{{ t('TrustedSignatureSolution') }}</p>
                        <div>
                            <button class="red-btn" @click.prevent="goSolution">{{ t('GetSolution') }}</button>
                        </div>
                    </div>

                    <div class="w-full xl:w-[50%] h-full grid grid-cols-1 sm:grid-cols-2 text-black gap-10">
                        <div
                            class="bg-white rounded-md p-7 border cursor-pointer hover:scale-110 hover:shadow-xl transition-all duration-500"
                        >
                            <img src="@/assets/imgs/home/xl1.svg" alt="" class="w-10" />
                            <h1 class="text-2xl font-bold">{{ t('4StepProcess') }}</h1>
                            <div class="mt-4">{{ t('Step') }}</div>
                        </div>

                        <div
                            class="bg-white rounded-md p-7 border cursor-pointer hover:scale-110 hover:shadow-xl transition-all duration-500"
                        >
                            <img src="@/assets/imgs/home/xl2.svg" alt="" class="w-10" />
                            <h1 class="text-2xl font-bold">{{ t('MinuteSetup') }}</h1>
                            <div class="mt-4">{{ t('LearnInstantly') }}</div>
                        </div>

                        <div
                            class="bg-white rounded-md p-7 border cursor-pointer hover:scale-110 hover:shadow-xl transition-all duration-500"
                        >
                            <img src="@/assets/imgs/home/xl3.svg" alt="" class="w-10" />
                            <h1 class="text-2xl font-bold">{{ t('FullControl') }}</h1>
                            <div class="mt-4">{{ t('EmailReminders') }}</div>
                        </div>

                        <div
                            class="bg-white rounded-md p-7 border cursor-pointer hover:scale-110 hover:shadow-xl transition-all duration-500"
                        >
                            <img src="@/assets/imgs/home/xl4.svg" alt="" class="w-10" />
                            <h1 class="text-2xl font-bold">{{ t('ReusableTemplates') }}</h1>
                            <div class="mt-4">{{ t('SaveField') }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 立即签约 -->
        <div class="bg-gray-900 h-[900px] sm:h-[637px] qy-box relative">
            <div
                class="absolute left-1/2 -translate-x-1/2 bottom-[100px] text-white px-5 w-full flex flex-col items-center"
            >
                <h1 class="font40 text-white">
                    <span>{{ t('Start') }}</span>
                    <span class="text-red-500 ml-1">{{ t('Signing') }}</span>
                </h1>

                <p class="py-10 font16 text-white leading-8 text-center">
                    {{ t('CreateYourAccount') }}
                </p>

                <button @click="login" class="white-btn">{{ t('CreateAccount') }}</button>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import api from '@/apis/base';
import no1 from '@/assets/imgs/home/no1.svg';
import no2 from '@/assets/imgs/home/no2.svg';
import no3 from '@/assets/imgs/home/no3.svg';
import no4 from '@/assets/imgs/home/no4.svg';
import no5 from '@/assets/imgs/home/no5.svg';
import no6 from '@/assets/imgs/home/no6.svg';

import mu1 from '@/assets/imgs/home/mu1.png';
import mu2 from '@/assets/imgs/home/mu2.png';
import mu3 from '@/assets/imgs/home/mu3.png';
import mu4 from '@/assets/imgs/home/mu4.png';
const { t, locale } = useI18n();
import { useRouter } from 'vue-router';
import { computed, onMounted } from 'vue';
import { useI18n } from 'vue-i18n';
const router = useRouter();
import { useUserStore } from '@/stores/user';
const userStore = useUserStore();
import config from '@/config';

const muList = computed(() => {
    return [
        {
            id: 1,
            url: mu1,
            title: t('zn-tips-1'),
            subList: [
                {
                    title: '',
                    content: t('zn-1-1'),
                },
                {
                    title: '',
                    content: t('zn-1-2'),
                },
                {
                    title: '',
                    content: t('zn-1-3'),
                },
            ],
        },
        {
            id: 2,
            url: mu2,
            title: t('zn-tips-2'),
            subList: [
                {
                    title: t('zn-2-1'),
                    content: t('zn-2-2'),
                },
                {
                    title: t('zn-2-3'),
                    content: t('zn-2-4'),
                },
            ],
        },
        {
            id: 3,
            url: mu3,
            title: t('zn-tips-3'),
            subList: [
                {
                    title: '',
                    content: t('zn-3-1'),
                },
                {
                    title: '',
                    content: t('zn-3-2'),
                },
                {
                    title: '',
                    content: t('zn-3-3'),
                },
            ],
        },
        {
            id: 4,
            url: mu4,
            title: t('zn-tips-4'),
            subList: [
                {
                    title: '',
                    content: t('zn-4-1'),
                },
            ],
        },
    ];
});

const list = computed(() => {
    return [
        {
            name: t('SignPDFDocuments'),
            url: no1,
        },
        {
            name: t('CreateCustomSignatures'),
            url: no2,
        },
        {
            name: t('BulkSigninginSeconds'),
            url: no3,
        },
        {
            name: t('OrganizeDocuments'),
            url: no4,
        },
        {
            name: t('CustomTemplates'),
            url: no5,
        },
        {
            name: t('RealTimeTracking'),
            url: no6,
        },
    ];
});

const goSolution = () => {
    router.push('/solution');
};

const login = () => {
    // 跳转不同环境的页面
    window.open(config.JUMP_URL + `?es=${locale.value}`, '__blank');
};

onMounted(async () => {
    const res = await api.config({});
    if (!res || res.code != 1) return;
    const { data } = res;
    for (let key in data) {
        if (
            key != 'appDownloadUrlForAndroid' &&
            key != 'appDownloadUrlForIOS' &&
            key != 'officialUrl' &&
            key != 'webApiUrl'
        ) {
            data[key] = data[key] + '?fileId=';
        }
    }
    userStore.setUserConfig(data);
});
</script>

<style scoped lang="scss">
.home-hed {
    background: url('@/assets/imgs/home/home-bg.jpg') no-repeat center;
    background-size: cover;
}

.xl-box {
    background: url('@/assets/imgs/home/xl-bg.jpg') no-repeat center;
    background-size: cover;
}
.qy-box {
    background: url('@/assets/imgs/home/qy-bg.jpg') no-repeat center;
    background-size: cover;
}
</style>
